<template>
	<div>
		<div>
			<div class="head">
				<a @click="back" class="return"></a>
				<span v-if="type == 1">修改支付密码</span>
				<span v-if="type == 0">设置支付密码</span>
			</div>
			<div class="overlay" style="padding: 20px 10px 10px;">
				<div class="overlay-content scrolling" align="center">
					<div v-if="type == 0">
						<van-cell-group>
							<van-field placeholder="请输入6位数字支付密码" maxlength="6" type="password" v-model.trim="payPwd"  />
						</van-cell-group>
						<van-cell-group>
							<van-field placeholder="请再次输入6位数字支付密码" maxlength="6" type="password" v-model.trim="payPwd2"  />
						</van-cell-group>
						<div class="btn" style="margin-top:20px;">
							<x-button type="primary" :show-loading="loading" @click.native="sure">保存</x-button>
						</div>
					</div>
					<div v-if="type == 1">
						<van-cell-group>
							<van-field placeholder="请输入6位数字旧支付密码" maxlength="6" type="password" v-model.trim="payPwd3" />
						</van-cell-group>
						<van-cell-group>
							<van-field placeholder="请输入6位数字新支付密码" maxlength="6" type="password" v-model.trim="payPwd4" />
						</van-cell-group>
						<van-cell-group>
							<van-field placeholder="请再次输入6位数字新支付密码" maxlength="6" type="password" v-model.trim="payPwd5"  />
						</van-cell-group>
						<div class="text">
							<flexbox>
								<flexbox-item>
									<div class="flex-demo tal">

									</div>
								</flexbox-item>
								<flexbox-item>
									<div class="flex-demo tar">
										<!-- <router-link to="/FindPwd" tag="span">忘记密码？</router-link> -->
										<a @click="getpad" tag="span" style="color:#525fd6">忘记支付密码？</a>
									</div>
								</flexbox-item>
							</flexbox>
						</div>
						<div class="btn" style="margin-top:10px;">
							<x-button type="primary" :show-loading="loading" @click.native="sure2">保存2</x-button>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Dialog, Toast } from 'vant';
	import { mine, base } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				type: this.$route.query.type, // 1:修改支付密码 0:设置支付密码
				payPwd: '',
				payPwd2: '',
				payPwd3: '',
				payPwd4: '',
				payPwd5: '',
				show: false,
				show2: false,
				loading: false,
				getCodeText: '获取验证码',
				k: '', // 凭证K值
				v: '' // 凭证V值
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			
		},
		methods: {
			getpad(){
				this.$router.push({path:'/FindPwd',query:{name:1}})
			},
			click2() {
				
			},
			isShow() {
				this.show = true;
			},
			isShow2() {
				this.show2 = true;
			},
			sure() {
				if(!this.payPwd) {
					Toast('支付密码不能为空');
					return false;
				}
				if(this.payPwd.length != 6) {
					Toast('支付密码为6位');
					return false;
				}
				if(!this.payPwd2) {
					Toast('确认支付密码不能为空');
					return false;
				}
				if(this.payPwd2.length != 6) {
					Toast('确认支付密码为6位');
					return false;
				}
				if(this.payPwd != this.payPwd2) {
					Toast('两次支付密码输入不一致');
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						mine.getTradePassWord({
							'key': this.k,
							'encryptedData': this.rsaEncrypt(this.payPwd + ',' + this.payPwd2 + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.loading = false;
									if(this.$route.query.roid) {
										this.$router.push({
											path: this.$route.query.roid
										})
									} else {
										this.$router.push({
											path: '/Safety'
										})
									}
								}, 500);
							} else if(res.code == 500) {
								this.loading = false;
							}
							Toast(res.msg);
						})
					}
				})
			},
			sure2() {
				if(!this.payPwd3) {
					Toast('旧密码不能为空');
					return false;
				}
				if(this.payPwd3.length != 6) {
					Toast('旧支付密码为6位');
					return false;
				}
				if(!this.payPwd4) {
					Toast('新支付密码不能为空');
					return false;
				}
				if(this.payPwd4.length != 6) {
					Toast('新支付密码为6位');
					return false;
				}
				if(this.payPwd4 != this.payPwd5) {
					Toast('两次支付密码输入不一致');
					return false;
				}
				this.loading = true;
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						mine.getUpdatePayPassword({
							'key': this.k,
							'encryptedData': this.rsaEncrypt(this.payPwd3 + ',' + this.payPwd4 + ',' + this.payPwd5 + ',' + this.v)
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.loading = false;
									if(this.$route.query.roid) {
										this.$router.push({
											path: this.$route.query.roid
										})
									} else {
										this.$router.push({
											path: '/Safety'
										})
									}
								}, 500);
							} else if(res.code == 500) {
								this.loading = false;
							}
							Toast(res.msg);
						})
					}
				})
			},
			back() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/Safety'
					})
				}
			}
		},
		watch: {
			payPwd: function() {
				this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 只能输入数字
			},
			payPwd2: function() {
				this.payPwd2 = this.payPwd2.replace(/[^\d]/g, ''); // 只能输入数字
			},
			payPwd3: function() {
				this.payPwd3 = this.payPwd3.replace(/[^\d]/g, ''); // 只能输入数字
			},
			payPwd4: function() {
				this.payPwd4 = this.payPwd4.replace(/[^\d]/g, ''); // 只能输入数字
			},
			payPwd5: function() {
				this.payPwd5 = this.payPwd5.replace(/[^\d]/g, ''); // 只能输入数字
			}
		}
	}
</script>

<style lang="less" scoped>
.btn /deep/ .weui-btn{background:#525fd6!important;border:1px solid #525fd6!important}
.btn /deep/ .weui-btn:after{width:0;height:0}
	.head~.overlay {
		top: 44px;
	}
	
	.van-cell {
		background-color: #333952;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
	}
	
	[class*=van-hairline] {
		position: unset;
		border-bottom: 2px solid #2c3145;
	}
	
	/deep/ .weui-btn_primary {
		background: #3fb776 !important;
	}
	
	/deep/ .van-button--primary {
		background: #3fb776 !important;
		border: 1px solid #3fb776;
	}
	
	.van-hairline--top-bottom::after {
		border: 0;
	}
	
	.btn {
		padding: 0 10px 0px;
	}
	
	/deep/ .van-field__control {
		color: #FFFFFF;
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: rgba(244, 244, 244, 0.3) !important;
	}
	
	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}
	
	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: rgba(244, 244, 244, 0.3) !important;
	}
	
	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: rgba(244, 244, 244, 0.3) !important;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	.text {
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
</style>